<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    
    <title>My JSP 'orderBook.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="reset.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript" src="js/jquery-1.4.js"></script>
	<!--表单拆分(分离版)start-->
	<link href="skins/blue/style.css" rel="stylesheet" type="text/css" id="compStyle"/>
	<script type="text/javascript" src="js/stepForm_split.js"></script>
	<!--表单拆分(分离版)end-->
	
	<!--表单验证(分离版)start-->
	<script src="js/validationEngine-cn.js" type="text/javascript"></script>
	<script src="js/validationEngine.js" type="text/javascript"></script>
	<!--表单验证(分离版)end-->

  </head>
  
  <body>
	<script>
		function changeSkin(){
			$("#compStyle").attr("href","skins/"+$("#changeSkin").val()+"/style.css");
		}
	</script>
	更换风格
	<select  onchange='changeSkin()' id="changeSkin">
	    <option value="blue">蓝色</option>
	    <option value="lightBlue">亮蓝色</option>
	    <option value="darkBlue">深蓝色</option>
	    <option value="green">绿色</option>
		<option value="red">红色</option>
		<option value="darkYellow">棕黄色</option>
		<option value="armyGreen">军绿色</option>
	</select>
	<div class="box2" panelWidth="800" panelTitle="效果"  showStatus="false">
		<form method="post" action="example4-6.html-content1.html" class="stepForm" stepFormTitle="true">
	<div id="step1" class="stepForm" stepFormTitle="用户基本信息">
		<table class="tableStyle" transMode="true">
			<tr>
				<td width="150">用户名：</td><td><input id="user" type="text" class=" validate[required,custom[noSpecialCaracters]]"/><span class="star">*</span></td>
			</tr>
			<tr>
				<td>姓名：</td>
				<td><input type="text"/></td>
			</tr>
			<tr>
				<td>曾用名：</td>
				<td><input type="text"/></td>
			</tr>
			<tr>
				<td>性别：</td>
				<td><label for="radio-1">男</label><input type="radio" id="radio-1" name="ra" value="radio-1" />
					<label for="radio-2">女</label><input type="radio" id="radio-2" name="ra" value="radio-2"/>
				</td>
			</tr>
			<tr>
				
				<td>婚姻状况：</td>
				<td><label for="radio-3">已婚</label><input type="radio" id="radio-3" name="ra2" value="radio-3" />
					<label for="radio-4">未婚</label><input type="radio" id="radio-4" name="ra2" value="radio-4"/>
				</td>
			</tr>
			<tr>
				<td>出生日期：</td>
				<td><input type="text" class="date"/></td>
			</tr>
			<tr>
				<td>爱好：</td>
				<td><label for="checkbox-1" >唱歌</label><input type="checkbox" id="checkbox-1" value="选项1"/>
					<label for="checkbox-2">跳舞</label><input type="checkbox" id="checkbox-2" value="选项2" />
				</td>
			</tr>

			
			<tr>
				<td colspan="2">
					<input type="button" value="下一步" selfTarget="step1" nextTarget="step2"/>
				</td>
			</tr>
		</table>
	</div>
	
	<div id="step2" class="stepForm" stepFormTitle="用户详细信息">
	<table class="tableStyle" transMode="true">
		<tr>
			<td width="150">民族：</td>
			<td>
				<select class="validate[required]">
				  	<option value="">请选择民族</option>
				    <option>汉族</option>
				    <option>满族</option>
				    <option>维吾尔族</option>
				 </select><span class="star">*</span>
			</td>
		</tr>
		<tr>
			<td>籍贯：</td>
			<td>
				<select id="sel2" colNum="3">
					    <option>北京市</option>
					    <option>天津市</option>
					    <option>河北省</option>
					    <option>山西省</option>
					    <option>内蒙古自治区</option>
					    <option>辽宁省</option>
					    <option>吉林省</option>
					    <option>黑龙江省</option>
					    <option>上海市</option>
					    <option>江苏省</option>
					    <option>浙江省</option>
					    <option>安徽省</option>
					    <option>福建省</option>
					    <option>江西省</option>
					    <option>山东省</option>
					    <option>湖南省</option>
					    <option>湖北省</option>
					    <option>河南省</option>
					    <option>广东省</option>
					    <option>广西壮族自治区</option>
					    <option>海南省</option>
					    <option>重庆市</option>
					    <option>四川省</option>
					    <option>贵州省</option>
					    <option>云南省</option>
					    <option>西藏自治区</option>
					    <option>陕西省</option>
					    <option>甘肃省</option>
					    <option>青海省</option>
					    <option>宁夏回族自治区</option>
					    <option>新疆维吾尔自治区</option>
					    <option>香港特别行政区</option>
					    <option>澳门特别行政区</option>
					    <option>台湾省</option>
					    <option>其他</option>
					 </select>
			</td>
		</tr>
		<tr>
			<td>学历：</td>
			<td>
				<select id="sel2" colNum="3">
					    <option>博士毕业</option>
					    <option>博士结业</option>
					    <option>博士肄业</option>
					    <option selected="selected">硕士毕业</option>
					    <option>硕士结业</option>
					    <option>硕士肄业</option>
					    <option>相当硕士毕业</option>
					    <option>研究生班毕业</option>
					    <option>研究生班结业</option>
					    <option>研究生班肄业</option>
					    <option>本科毕业</option>
					    <option>本科结业</option>
					    <option>本科肄业</option>
					    <option>相当本科毕业</option>
					    <option>大专毕业</option>
					    <option>大专结业</option>
					    <option>大专肄业</option>
					    <option>相当大专毕业</option>
					    <option>中专毕业</option>
					    <option>中专结业</option>
					    <option>中专肄业</option>
					    <option>相当中专毕业</option>
					    <option>其它</option>
					 </select>	
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="button" value="上一步" selfTarget="step2" prevTarget="step1" />
				<input type="button" value="下一步" selfTarget="step2" nextTarget="step3" />
			</td>
		</tr>
	</table>
	</div>
	
	
	<div id="step3" class="stepForm" stepFormTitle="用户其他信息">
	<table class="tableStyle" transMode="true">
		<tr>
			<td width="150">年龄：</td><td><input type="text" class=" validate[required,custom[onlyNumber],length[0,3]]"/><span class="star">*</span></td>
		</tr>
		<tr>
			<td>邮政编码：</td>
			<td><input type="text"/></td>
		</tr>
		<tr>
			<td>固定电话：</td>
			<td><input type="text"/></td>
		</tr>
		<tr>
			<td>上传附件：</td>
			<td><input type="file"/></td>
		</tr>
		<tr>
			<td>备注：</td>
			<td>
				<span class="float_left">
				<textarea></textarea>
				</span>
				<span class="img_light" style="height:80px;" title="限制在200字以内"></span>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="button" value="上一步" selfTarget="step3" prevTarget="step2"/>
				<input type="submit" value=" 提 交 "/>
			</td>
		</tr>
	</table>
	</div>
	
</form>
	</div>
	
	<div class="box2" panelTitle="基本用法" >
	要实现表单拆分，首先要引入表单拆分脚本：
<textarea class="code">
<script type="text/javascript" src="../jquery-1.4.js"></script>
<!--表单拆分(分离版)start-->
<link href="skins/blue/style.css" rel="stylesheet" type="text/css" id="compStyle"/>
<script type="text/javascript" src="js/stepForm_split.js"></script>
<!--表单拆分(分离版)end-->
</textarea>
<pre></pre>	
	
	如果要每一步都验证，还需要引入验证脚本：
<textarea class="code">
<!--表单验证(分离版)start-->
<script src="js/validationEngine-cn.js" type="text/javascript"></script>
<script src="js/validationEngine.js" type="text/javascript"></script>
<!--表单验证(分离版)end-->
</textarea>
<pre></pre>	

	然后对form添加两个属性：class="stepForm" stepFormTitle="true"<br />
	class="stepForm"为必需。当要显示头部的导航按钮时，需要设置stepFormTitle为true，否则可以不做设置或设为false。<br />
	然后把表单内容分成几块，每块用div作为容器，div也必须设置class="stepForm"。<br />
	如果form设置了stepFormTitle为true，那么每块div还需设置stepFormTitle="该步骤标题"。代码如下：
<textarea class="code">
<div class="box2" panelWidth="600" panelTitle="表单填写"  showStatus="false">
<form method="post" action="chapter5-3-7-content1.html" class="stepForm" stepFormTitle="true">
	<div id="step1" class="stepForm" stepFormTitle="表单步骤一">
		<table class="tableStyle" transMode="true">
			（第一部分表单内容）
			<tr>
				<td colspan="2">
					<input type="button" value="下一步" selfTarget="step1" nextTarget="step2"/>
				</td>
			</tr>
		</table>
	</div>
	
	<div id="step2" class="stepForm" stepFormTitle="表单步骤二">
		<table class="tableStyle" transMode="true">
			（第二部分表单内容）
			<tr>
				<td colspan="2">
					<input type="button" value="上一步" selfTarget="step2" prevTarget="step1"/>
					<input type="button" value="下一步" selfTarget="step2" nextTarget="step3"/>
				</td>
			</tr>
		</table>
	</div>
	
	<div id="step3" class="stepForm" stepFormTitle="表单步骤三">
		<table class="tableStyle" transMode="true">
			（第三部分表单内容）
			<tr>
				<td colspan="2">
					<input type="button" value="上一步" selfTarget="step3" prevTarget="step2"/>
					<input type="button" value="下一步" selfTarget="step3" nextTarget="step4"/>
				</td>
			</tr>
		</table>
	</div>
	
	<div id="step4" class="stepForm" stepFormTitle="表单步骤四">
		<table class="tableStyle" transMode="true">
			（第四部分表单内容）
			<tr>
				<td colspan="2">
					<input type="button" value="上一步" selfTarget="step4" prevTarget="step3"/>
					<input type="submit" value=" 提 交 "/>
				</td>
			</tr>
		</table>
	</div>
</form>
</div>
</textarea>
<pre></pre>	

	上面代码中，把表单分成了4块，每块的div容器都设了一个id。每块的”上一步“或”下一步“按钮都有两个属性。<br />
	”上一步“的属性是selfTarget来指向自己所在div容器的id，prevTarget指向上一个容器的id.<br />
	”下一步“的属性是selfTarget来指向自己所在div容器的id，nextTarget指向下一个容器的id.<br />
	</div>
	如果不需要头部的导航，则无需设置form的stepFormTitle属性或将该属性设为false。
</body>
<!--代码高亮start-->
<script type="text/javascript" src="js/hl/highlight.js"></script>
<script type="text/javascript" src="js/hl/lang-xml.js"></script>
<script type="text/javascript" src="js/hl/lang-html.js"></script>
<link href="js/hl/style.css" rel="stylesheet" type="text/css"/>
<script>
	$(function(){
			showCode()
	})
	function showCode(){
		$(".code").each(function(){
			var code =$(this).val()
			var hl = new DlHighlight({lang: "html",lineNumbers :false });
			var formatted = hl.doItNow(code);
			$(this).next().addClass("DlHighlight").html("<pre>" + formatted + "</pre>")
		})
	}
</script>
<!--代码高亮end-->
</html>
